<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .qrcodelist {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }

      a {
        outline: none;
        color: #000;
        text-decoration: none;
      }

      a:hover {
        color: #999;
        text-decoration: underline;
      }

      a.active {
        color: red;
      }
    </style>
  </head>

  <body>
    <h1>
      <a class="active" href="./createQR.html">js生成二维码(不支持中文编码)</a>
    </h1>
    <h1>
      <a href="./createQR copy.html"
        >js生成二维码(支持中文编码和中间生成logo)</a
      >
    </h1>
    <div class="qrcodelist">
      <div class="qrcodeItem">
        <div id="qrcode1"></div>
        <div class="txt">二维码内容: https://www.baidu.com/</div>
      </div>
      <div class="qrcodeItem">
        <div id="qrcode2"></div>
        <div class="txt">二维码内容:131231412412</div>
      </div>
      <div class="qrcodeItem">
        <div id="qrcode3"></div>
        <div class="txt">二维码内容: 1fsfsdfdfsf</div>
      </div>
      <div class="qrcodeItem">
        <div id="qrcode4"></div>
        <div class="txt">二维码内容: 214124324234</div>
      </div>
    </div>
  </body>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="./jquery.qrcode.min.js"></script>
  <script>
    jQuery(function () {
      jQuery("#qrcode1").qrcode("https://www.baidu.com/");
      jQuery("#qrcode2").qrcode("131231412412");
      //   生成200*200(宽度200，高度200)的二维码
      jQuery("#qrcode3").qrcode({
        render: "canvas", //也可以替换为table
        foreground: "pink", //红码（方块颜色）
        background: "#FFF", //背景颜色
        width: 200,
        height: 200,
        text: "1fsfsdfdfsf",
      });
      // //生成前景色为红色背景色为白色的二维码
      // jQuery("#qrcode4").qrcode({
      //   render: "canvas", //也可以替换为table
      //   foreground: "#C00", //红码（方块颜色）
      //   background: "#FFF", //背景颜色
      //   text: "214124324234",
      //   width: 200,
      //   height: 200,
      //   src: "./image/icon2.jpeg", //二维码中间的图片
      // });
      window.onload = function () {
      var trs = $("#qrcode4")
          .qrcode({
            width: 100,
            height: 100,
            render: "table", //设置渲染方式 table canvas
            text: utf16to8("javascript生成二维码"),
            background: "#ffffff", //背景颜色
            foreground: "red", //前景颜色
          })
          .find("tr"),
        trLen = Math.floor(trs.size() / 2),
        tdLen = Math.floor(trs.eq(0).find("td").size() / 2),
        tds,
        bgColor;

      var colors = [
        ["#ff0000", "#0100e2"],
        ["#00ed01", "#9f4d95"],
        
      ];
      trs.each(function (j) {
        tds = $(this).find("td");
        tds.each(function (i) {
          bgColor = this.style.backgroundColor;
          if (bgColor == "red") {
            this.style.backgroundColor =
              colors[j < trLen ? 0 : 1][i < tdLen ? 0 : 1];
          }
        });
      });
    };
    function utf16to8(str) {
      var out, i, len, c;
      out = "";
      len = str.length;
      for (i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if (c >= 0x0001 && c <= 0x007f) {
          out += str.charAt(i);
        } else if (c > 0x07ff) {
          out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
          out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
        } else {
          out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
        }
      }
      return out;
    }
    });
  </script>

  
</html>
